<template>
	<view
		v-if="loading.show"
		class="gy-loading gy-mask flex-c-c"
		:class="[props.mask ? (loading.show ? 'gy-mask-show' : 'gy-mask-hide') : '', props.mask ? '' : 'pointer']">
		<view class="gy-loading-box flex-c-c" :class="{show: loading.visible}" :style="{backgroundColor: props.bgColor}">
			<com-loading-icon
				:mode="props.mode"
				:path="props.path"
				:color="props.color"
				:lineColor="props.lineColor"
				:bgImage="props.bgImage"
				:size="props.size"
				:steps="props.steps"
				:lineWidth="props.lineWidth" />
			<!-- <com-gap :height="10" /> -->
			<text :style="{fontSize: props.size, color: props.color}">{{ props.text }}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref
    } from "vue";

    const props = defineProps({
    	mask: {
    		type: Boolean,
    		default: true
    	},
    	mode: {
    		type: String,
    		default: 'flower'
    	},
    	path: {
    		type: [String, Object]
    	},
    	color: {
    		type: String,
    		default: '#99989a'
    	},
    	lineColor: {
    		type: String,
    		default: '#e4e4e4'
    	},
    	bgImage: {
    		type: String,
    		default: "conic-gradient(#00d9c0, #00dbc4, #00dcc9, #3fdfce, #6be1d3, #8de1d7, #ade4dc, #c9e5e1)"
    	},
    	size: {
    		type: Number,
    		default: 130
    	},
    	steps: {
    		type: Number,
    		default: 8
    	},
    	lineWidth: {
    		type: Number,
    		default: 6
    	},
    	text: {
    		type: String,
    		default: '加载中'
    	},
    	textSize: {
    		type: Number,
    		default: 30
    	},
    	textColor: {
    		type: String,
    		default: '#333333'
    	},
    	bgColor: {
    		type: String,
    		default: '#ffffff'
    	}
    });

    const loading = ref({
        show: false,
        visible: false
    });

    function show(obj: any){
    	loading.value = {
            show: true,
            visible: true
        };
    }
    function hide(){
    	loading.value.visible = false;
    	setTimeout(() => {
    		loading.value.show = false;
    	}, 100)
    }
</script>

<style lang="scss" scoped>
	.gy-loading{
	    .gy-loading-box{
	        width: 260rpx;
	        height: 260rpx;
	        flex-direction: column;
	        padding: var(--gy-gap);
	        border-radius: var(--gy-gap);
	        transition: 0.2s;
	        transform: scale(1);
	        opacity: 0;
	    }
	    .show{
	        transform: scale(1.2);
	        opacity: 1;
	    }
	}
	.pointer{
	    pointer-events: none;
	}
</style>
